import React from "react";
import { Link, useParams, useNavigate, Form } from "react-router-dom"
import { SwipeAction, Empty } from 'antd-mobile'
import './myclass.css'
import { routerBeforeEach } from "../../router/routerBeforeEach"


function Myclass() {
    let navigate = useNavigate();//链接跳转
    let [classlist, SetClass] = React.useState([])
    React.useEffect(() => {
        SetClass(JSON.parse(localStorage.getItem("class")))
    }, [])


    return (
        <div className="myclass">

            <div className="top">
                <div className="left">
                    <i onClick={() => navigate(-1)} className="iconfont icon-zuobian"></i>
                </div>
                <div>我的课程</div>
                <div className="right">
                </div>
            </div>
            {
                classlist.length == 0 ? (<Empty
                    style={{ padding: '220px 0' }}
                    imageStyle={{ width: 128 }}
                    description='暂无数据'
                />) : ('')
            }

            <div className="course">
                <div className="content">
                    <ul>
                        {
                            classlist && classlist.map(item => {
                                return (
                                    <SwipeAction
                                        key={item.series_id}

                                        rightActions={[
                                            {
                                                key: 'delete',
                                                text: '删除',
                                                color: 'danger',
                                                onClick: async () => {

                                                    classlist = classlist.filter(items => {
                                                        return items.series_id != item.series_id
                                                    })
                                                    SetClass(classlist)
                                                    localStorage.setItem("class", JSON.stringify(classlist))
                                                },
                                            },

                                        ]}

                                    >
                                        <Link to={'/detailscourse/' + item.series_id}>
                                            <li>
                                                <div className='img'>
                                                    <img src={item.series_image} />
                                                    <span className='icons'>专辑</span>
                                                    <i className='icon'></i>
                                                    <span className='video-count'>{item.new_episode}个视频</span>
                                                </div>
                                                <div className='text'>
                                                    <h2>{item.album_info.album_name}</h2>
                                                    <span>{item.series_name}</span>
                                                    <span>已观看至{item.videoId+1}集</span>
                                                </div>
                                            </li>
                                        </Link>

                                    </SwipeAction>

                                )
                            })
                        }

                    </ul>
                </div>

            </div>


        </div >
    )
}

export default routerBeforeEach(Myclass)